<template>
	<view class="account_balance_main">
		<view class="balance_available">
			<view class="account_balance_title">
				<CustomNav navTitle="账户余额"></CustomNav>
			</view>
		</view>
		<view class="balance_usable">
			<view class="balance_usable_title">
				可用余额(元)
			</view>
			<view class="balance_usable_money">
				2000.00
			</view>
			<view class="balance_usable_pay">
				<text @click="handleToWithdraw">提现</text>
				<text @click="handleToRecharge">充值</text>
			</view>
		</view>
		<view class="balance_detail">
			<view class="balance_detail_nav">
				<text>余额变动明细</text>
				<view class="balance_detail_more" @click="handleToBalanceDetail">
					全部<image src="../../../static/image/icon-xyy.png" mode=""></image>
				</view>
			</view>
			<view class="balance_detail_list">
				<view class="balance_detail_list_item">
					<view class="balance_detail_info">
						<text>转账收款到余额</text>
						<text>-100.00</text>
					</view>
					<view class="balance_detail_date">
						<text>2021-08-23  09:46:39</text>
						<text>余额 0.00</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CustomNav from '../../../components/CustomNav/index.vue'
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		
		components: {
			CustomNav
		},
		
		methods: {
			// 跳转至变动明细
			handleToBalanceDetail() {
				uni.navigateTo({
					url:'../balanceDetail/index'
				})
			},
			// 跳转至充值页面
			handleToRecharge() {
				uni.navigateTo({
					url:'../recharge/index'
				})
			},
			//跳转至提现页面
			handleToWithdraw() {
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.account_balance_main {
		.balance_available {
			height: 417rpx;
			background-color: #D1A764;
		}
		.balance_usable {
			margin: -270rpx 20rpx 0;
			padding: 0 27rpx;
			box-shadow: 0px 1px 25px 0px rgba(139, 139, 139, 0.4);
			background-color: #fff;
			border-radius: 15rpx;
			text-align: center;
			.balance_usable_title {
				padding: 80rpx 0 36rpx 0;
				font-size: 24rpx;
				color: #333333;
			}
			.balance_usable_money {
				color: #333333;
				font-size: 62rpx;
				font-weight: bold;
				padding-bottom: 100rpx;
			}
			.balance_usable_pay {
				display: flex;
				font-size: 36rpx;
				text-align: center;
				font-weight: 500;
				padding-bottom: 56rpx;
				justify-content: space-between;
				text {
					border-radius: 10rpx;
				}
				text:first-child {
					width: 314rpx;
					border: 2rpx solid #DCDCDC;
					height: 96rpx;
					line-height: 96rpx;
				}
				text:last-child {
					background: linear-gradient(0deg, #CFA461 0%, #DCBB7E 100%);
					width: 316rpx;
					height: 98rpx;
					line-height: 98rpx;
					color: #fff;
				}
			}
		}
		.balance_detail {
			box-shadow: 0px 1px 25px 0px rgba(139, 139, 139, 0.4);
			background-color: #fff;
			border-radius: 15rpx;
			margin: 18rpx 20rpx 0;
			.balance_detail_nav {
				margin: 0 14rpx;
				height: 99rpx;
				line-height: 99rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #D2D2D2;
				text {
					font-size: 32rpx;
					color: #333333;
					font-weight: bold;
				}
				.balance_detail_more {
					color: #999999;
					font-size: 30rpx;
					image {
						width: 13rpx;
						height: 23rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
		.balance_detail_list {
			padding-bottom: 30rpx;
			.balance_detail_list_item {
				padding: 0 30rpx;
				padding-top: 52rpx;
			}
			.balance_detail_list_item:first-child {
				padding-top: 30rpx;
			}
			.balance_detail_list_item view {
				display: flex;
				justify-content: space-between;
			}
			.balance_detail_info {
				font-size: 30rpx;
				padding-bottom: 30rpx;
			}
			.balance_detail_date {
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
</style>
